<template>
  <view style="display: flex; justify-content: space-between; padding: 1px 20px;">
    <view v-for="item in navbarList" style="display: flex; justify-content: center; align-items: center;flex-direction: column;" @click="tonav(item)" >
		<view class="" v-if="item.text=='首页'">
		  <i class="iconfont" :style="{ color: navValue === 1 ? 'black' : 'gray' }">&#xe846;</i>
		</view>
	  <view class="" v-if="item.text=='圈子'">
	    <i class="iconfont" :style="{ color: navValue === 2 ? 'black' : 'gray' }">&#x10132;</i>
	  </view>
	  <view class="" v-if="item.text=='我的'">
	    <i class="iconfont" :style="{ color: navValue === 3 ? 'black' : 'gray' }">&#xe624;</i>
	  </view>
	  {{item.text}} 
    </view>
    <!-- <view style="display: flex; justify-content: center; align-items: center;flex-direction: column;">
      <i class="iconfont" style="margin: auto;font-size: 40rpx;">&#x10132;</i>{{item}}
	  
    </view>
    <view style="display: flex; justify-content: center; align-items: center;flex-direction: column;">
      <i class="iconfont" style="margin: auto;font-size: 40rpx;"></i>{{item}}
    </view> -->
  </view>
</template>


<script>
	export default {
		name:"navbar",
		data() {
			return {
				navValue:1,
				navbarList:[
					{text:'首页',url:'/pages/index/index'},
					{text:'圈子',url:'/pages/index/buy'},
					{text:'我的',url:'/pages/index/mine'}
				]
			};
		},
		methods:{
			tonav(val){
				console.log(val.text);
				switch(val.text){
					case '首页':
					this.navValue=1
					break;
					case '圈子':
					this.navValue=2
					break;
					case '我的':
					this.navValue=3
					break;
					default:
					console.log('哪里也不去')
				}
				if(this.navValue==2){
					uni.showToast({
						icon:'none',
						title: '该功能正在开发中...',
						duration: 2000
					});
				}else{
					uni.reLaunch({
						url:val.url
					})
				}
				
				console.log('啦啦啦啦啦',this.navValue,val.url)
			}
		}
	}
</script>

<style lang="scss" scoped>
.iconfont{
	margin: auto;
	font-size: 40rpx;
}
</style>